<template>
    <div class="addBtn">
        <div>
            <div class="addBtn">
                <el-dialog title="添加" :visible.sync="dialogTableVisible" :before-close="closeForm">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="名称" prop="nickname">
                            <el-input v-model="ruleForm.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="图片">
                            <el-upload v-if="dialogImageUrl==''" action="https://api.zctj16888.com/admin/v1/image/ossUpload"
                                list-type="picture-card" :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove" name="image" :on-success="handleAvatarSuccess">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <div v-else>
                                <img style="width: 146px;height: 146px;" :src="dialogImageUrl">
                                <i class="el-icon-delete" @click="deleteImg"></i>
                            </div>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>

                        <el-form-item label="简介">
                            <el-input v-model="ruleForm.desc"></el-input>
                        </el-form-item>
                        <el-form-item label="关注数">
                            <el-input v-model="ruleForm.fans"></el-input>
                        </el-form-item>
                        <el-form-item label="擅长联赛" prop="competitions">
                            <el-input v-model="ruleForm.competitions"></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示">
                            <el-radio-group v-model="ruleForm.status">
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="2">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input v-model="ruleForm.sort"></el-input>
                        </el-form-item>

                    </el-form>
                    <div style="text-align: right;">
                        <el-button @click="clickDelete">取消</el-button>
                        <el-button type="primary" @click="clickConfirm">确认</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
        <div style="display: flex;  align-items: center; margin: 30px 30px 30px 30px;">
            <el-input
                v-model="searchQuery"
                placeholder="请输入专家昵称搜索"
                style="width: 300px"
                clearable
                @clear="handleSearch"
                @input="handleSearch"
            >
                <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
            </el-input>
            
           <div style="margin-left: 100px;">
            <el-button type="primary" @click="handleButtonAdd()">+ 添加</el-button>
           </div>
        </div>

        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">
            </el-table-column>
            <el-table-column prop="avatar" label="头像" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.avatar" fit="fill"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" align="center">
            </el-table-column>
            <el-table-column prop="desc" label="简介" align="center">
            </el-table-column>
            <el-table-column prop="competitions" label="擅长联赛" align="center">
            </el-table-column>
            <el-table-column prop="fans" label="粉丝数" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 1">
                        <div class="status-icon"></div>显示
                    </span>
                    <span v-if="scope.row.status == 2">
                        <div class="status-icon"></div>隐藏
                    </span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="programme" label="方案数" align="center">
            </el-table-column> -->
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        <el-button size="small" type="danger" style="width: 126px;margin-bottom: 10px"
                            @click="handleButtonViewPlan(scope.row, 1)">修改</el-button>
                            <el-button size="small" style="width: 126px;margin: 0 !important;" type="info" @click="handleButtonDelete(scope.row)">删除</el-button>
                        <!-- <el-button size="small" type="info" style="width: 126px;margin: 0 !important;"
                            @click="handleButtonDelete(scope.row)">删除</el-button> -->
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="修改" :visible.sync="dialogTableXiugai" :before-close="closeFormX">
                    <el-form :model="modifyForm" :rules="rules" ref="modifyForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="名称" prop="nickname">
                            <el-input v-model="modifyForm.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="图片">
                            <el-upload v-if="dialogImageUrl==''" action="https://api.zctj16888.com/admin/v1/image/ossUpload"
                                list-type="picture-card" :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove" name="image" :on-success="handleAvatarSuccess">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <div v-else>
                                <img style="width: 146px;height: 146px;" :src="dialogImageUrl">
                                <i class="el-icon-delete" @click="deleteImg"></i>
                            </div>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>

                        <el-form-item label="简介">
                            <el-input v-model="modifyForm.desc"></el-input>
                        </el-form-item>
                        <el-form-item label="关注数">
                            <el-input v-model="modifyForm.fans"></el-input>
                        </el-form-item>
                        <el-form-item label="擅长联赛" prop="competitions">
                            <el-input v-model="modifyForm.competitions"></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示">
                            <el-radio-group v-model="modifyForm.status">
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="2">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input v-model="modifyForm.sort"></el-input>
                        </el-form-item>

                    </el-form>
                    <div style="text-align: right;">
                        <el-button @click="clickDelete">取消</el-button>
                        <el-button type="primary" @click="clickConfirm">确认</el-button>
                    </div>
                </el-dialog>
        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { expertList, expertDelete, expertModify } from '../../../libs/api'
export default {
    data() {
        return {
            ruleForm: {},
            dialogVisible: false,
            dialogImageUrl: '',
            searchQuery: '',
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
            },
            checkboxGroup1: [],
            dialogTableVisible: false,
            tableData: [],
            alltableData: [],
            currentPage: 1,
            totalCount: 1,
            PageSize: 5,
            pageSizes: [5, 10],
            xiugai: 0,
            dialogTableXiugai:false,
            modifyForm:{}
        }
    },
    computed: {
        filteredTableData() {
            if (!this.searchQuery) {
                return this.tableData;
            }
            const query = this.searchQuery.toLowerCase();
            return this.tableData.filter(item => 
                item.nickname && item.nickname.toLowerCase().includes(query)
            );
        }
    },
    created() {
        this.getExpertList()
    },
    methods: {
        closeFormX(){
            console.log("99999")
            this.dialogTableXiugai = false
            this.getExpertList()
            Object.assign(this.modifyForm, { 
                nickname: '',
                status: '',
                desc: '',
                competitions: '',
                fans: '',
                sort: '',
                avatar: ''
      });
        this.dialogImageUrl = ''
        },
        closeForm(){
            Object.assign(this.ruleForm, { 
                nickname: '',
                status: '',
                desc: '',
                competitions: '',
                fans: '',
                sort: '',
                avatar: ''
      });
        this.dialogImageUrl = ''
        this.dialogTableVisible=false
        },
        // 显示第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.currentPage = val
            this.getExpertList()
        },
        // 分页
        // 每页显示的条数
        handleSizeChange(val) {
            // 改变每页显示的条数 
            this.PageSize = val
            // 点击每页显示的条数时，显示第一页
            console.log(val)
            this.PageSize = val
            // 改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1
            this.getExpertList()
        },
        getExpertList() {
            expertList({
                page: this.currentPage,
                limit: this.PageSize,
                expertName: this.searchQuery

            }).then(res => {
                console.log(res)
                this.tableData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
        },
        handleButtonAdd() {
            this.dialogTableVisible = true
        },
        // 修改
        handleButtonViewPlan(row, e) {
            this.ruleForm = row
            this.modifyForm = row
            // this.dialogTableVisible = true
            this.dialogTableXiugai = true
            this.xiugai = e
            this.dialogImageUrl = this.ruleForm.avatar
            console.log(this.ruleForm)
        },
        deleteImg(){
            this.dialogImageUrl = ''
        },
        // 删除
        handleButtonDelete(row) {
            this.$confirm('此操作将永久删除该专家, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            expertDelete({
                id: row.id
            }).then(res => {
                this.$message({
            type: 'success',
            message: '删除成功!'
          });
                this.getExpertList()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        clickDelete() {
            this.dialogTableVisible = false
        },
        clickConfirm() {
            console.log(this.ruleForm.img_url)
            let that = this
            if (this.xiugai == 0) {
                console.log(that.ruleForm.img_url)
                expertModify({
                    nickname: that.ruleForm.nickname,
                    status: that.ruleForm.status,
                    desc: that.ruleForm.desc,
                    competitions: that.ruleForm.competitions,
                    fans: that.ruleForm.fans,
                    sort: that.ruleForm.sort,
                    avatar: that.ruleForm.img_url
                }).then(res => {
                    that.getExpertList()
                })
            } else {
                console.log(that.dialogImageUrl)
                expertModify({
                    nickname: that.ruleForm.nickname,
                    avatar: that.dialogImageUrl,
                    status: that.ruleForm.status,
                    desc: that.ruleForm.desc,
                    competitions: that.ruleForm.competitions,
                    fans: that.ruleForm.fans,
                    sort: that.ruleForm.sort,
                    id: that.ruleForm.id
                }).then(res => {
                    that.getExpertList()
                })
            }
            this.dialogTableVisible = false
            this.dialogTableXiugai = false
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleAvatarSuccess(res, file) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res)
            console.log(URL.createObjectURL(file.raw))
            this.ruleForm.img_url = res.data.url
            this.dialogImageUrl = res.data.url
            // this.ruleForm.img_url = URL.createObjectURL(file.raw)
        },
        handleSearch() {
            this.currentPage = 1;
            this.getExpertList()
            console.log(this.searchQuery)

            
            // The computed property filteredTableData will automatically update
            // when searchQuery changes, so we don't need to do anything here
        },
    }
}
</script>

<style></style>